<template>
	<el-card>
		<el-form ref="queryForm" :inline="true">
			<el-form-item prop="postCode" label="关键词:" style="width: 320px">
				<el-input v-model="state.queryParams.condition" placeholder="请输入编号或名称关键字" clearable></el-input>
			</el-form-item>

			<el-form-item>
				<el-button icon="Search" type="primary" @click="handleSearch">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button icon="RefreshRight" @click="handleReset">重置</el-button>
			</el-form-item>
		</el-form>
	</el-card>

	<el-card>
		<el-table
			v-loading="state.dataListLoading"
			:data="dataList"
			class="mt20"
			stripe
			element-loading-background="rgba(0, 0, 0, 0.5)"
			element-loading-text="加载中..."
			header-row-class-name="table-header"
		>
			<el-table-column type="index" label="序号" header-align="center" align="center" width="60"></el-table-column>
			<el-table-column label="标准编号" align="center" prop="standardNumber" />
			<el-table-column label="标准名称" align="center" prop="standardProjectName" />
			<el-table-column label="反馈日期" align="center" prop="createTime">
				<template #default="scope">
					<span v-if="scope.row.createTime">{{ scope.row.createTime.slice(0, 10) }}</span>
				</template>
			</el-table-column>
			<el-table-column label="实施日期" align="center" prop="implementationTime">
				<template #default="scope">
					<span v-if="scope.row.implementationTime">{{ scope.row.implementationTime.slice(0, 10) }}</span>
				</template>
			</el-table-column>
			<el-table-column label="所在单位" align="center" prop="orgName" />
			<el-table-column label="职务职称" align="center" prop="position" />
			<el-table-column label="专业领域" align="center" prop="professionalField" />
			<el-table-column label="征求人姓名" align="center" prop="opinionPeopleName" />
			<el-table-column label="状态" align="center" prop="iflag">
				<template #default="scope">
					<span>{{ scope.row.iflag ? '有效' : '无效' }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
				<template #default="scope">
					<el-icon :size="16" color="#1491FF" title="查看" style="cursor: pointer; margin: 0 6px" @click="handleDetail(scope.row)">
						<View />
					</el-icon>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:current-page="state.pageNum"
			:page-size="state.pageSize"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		></el-pagination>
	</el-card>

	<cmDialog v-model="showDialog" modal-title="详情">
		<el-form :model="form" style="margin-top: 20px" label-width="120px">
			<el-row>
				<el-col :span="12">
					<el-form-item label="标准编号">
						<el-input v-model="form.standardNumber" readonly></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="标准名称">
						<el-input v-model="form.standardProjectName" readonly></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="反馈日期">
						<el-input v-model="form.createBy" readonly></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="实施日期">
						<el-input v-model="form.implementationTime" readonly></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="征求人姓名">
						<el-input v-model="form.opinionPeopleName" readonly></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="联系方式">
						<el-input v-model="form.contactTel" readonly></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="所在单位">
						<el-input v-model="form.orgName" readonly></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="职务职称">
						<el-input v-model="form.position" readonly></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label=" 专业领域">
						<el-input v-model="form.professionalField" readonly></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="电子邮箱">
						<el-input v-model="form.contactEmail" readonly></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-form-item label="反馈内容">
						<el-input v-model="form.opinionContent" readonly type="textarea" :rows="5"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</cmDialog>
</template>
<script setup lang="ts">
import { yijianList } from '@/api/other/index'
import { reactive, ref, watch } from 'vue'

import cmDialog from '@/components/cm-dialog/index.vue'

const props = defineProps({
	step: {
		type: String,
		default: ''
	}
})

interface Form {
	standardNumber: string
	standardProjectName: string
	createBy: string
	implementationTime: string
	opinionPeopleName: string
	contactTel: string
	orgName: string
	position: string
	professionalField: string
	contactEmail: string
	opinionContent: string
}

const state = reactive({
	queryParams: {
		condition: ''
	},
	pageNum: 1,
	pageSize: 10,
	total: 1,
	dataListLoading: false
})
const dataList = ref([])
const showDialog = ref<boolean>(false)
const form = ref<Form>(null)

watch(
	() => props.step,
	newVal => {
		if (newVal === 'eighth') {
			getDataList()
		}
	}
)

const getDataList = () => {
	state.dataListLoading = true
	yijianList({
		pageNum: state.pageNum,
		pageSize: state.pageSize,
		condition: state.queryParams.condition
	}).then(res => {
		state.dataListLoading = false
		dataList.value = res.data.list || []
		state.total = res.data.total || 0
	})
}

const handleDetail = (row: any) => {
	showDialog.value = true
	row.createBy = row.createBy ? row.createBy.slice(0, 10) : ''
	row.implementationTime = row.implementationTime ? row.implementationTime.slice(0, 10) : ''
	form.value = row
}

const handleSearch = () => {
	state.pageNum = 1
	getDataList()
}

const handleReset = () => {
	state.queryParams.condition = ''
	state.pageNum = 1
	getDataList()
}

const sizeChangeHandle = (val: number) => {
	state.pageSize = val
	getDataList()
}

const currentChangeHandle = (val: number) => {
	state.pageNum = val
	getDataList()
}
</script>

<style lang="scss" scoped></style>
